<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <v-layout>
    <div style="width: 100%; background-color: rgb(239, 239, 239); padding: 10px">
      <v-table fixed-header height="74vh">
        <thead>
          <tr>
            <th v-for="title in achievementTitle" :key="title" style="font-size: small">
              {{ title }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in results" :key="item.time" style="font-size: small">
            <td>{{ item.time }}</td>
            <td>{{ item.level }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.result }}</td>
            <td>{{ item.comment }}</td>
          </tr>
          <tr v-if="changeInfo">
            <td><v-text-field v-model="data.time" variant="underlined" placeholder="获奖/投稿时间"></v-text-field></td>
            <td><v-text-field v-model="data.level" variant="underlined" placeholder="奖励级别/投稿对象"></v-text-field></td>
            <td><v-text-field v-model="data.name" variant="underlined" placeholder="竞赛名称/科研课题"></v-text-field></td>
            <td><v-text-field v-model="data.result" variant="underlined" placeholder="所获奖项/论文水平"></v-text-field></td>
            <td><v-text-field v-model="data.comment" variant="underlined" placeholder="奖励/论文说明"></v-text-field></td>
          </tr>
        </tbody>
        <template v-slot:bottom>
          <div style="display: flex; padding-bottom: 0.5%; padding-left: 1%">
            <v-btn @click="() => {
              changeInfo = !changeInfo
              if (!changeInfo) {
                clear()
              }
            }
              ">
              <span v-if="changeInfo">取消</span>
              <span v-if="!changeInfo">添加</span>
            </v-btn>
            <v-btn v-if="changeInfo" class="btn" density="compact" color="light-blue-accent-3" height="35px"
              @click="addAudit()">
              提交
            </v-btn>
          </div>
        </template>
      </v-table>
    </div>
  </v-layout>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { message, messageConfirm } from '@/utils/message'
import { AddAudit, GetApplication } from '@/controllers/auditController';
let changeInfo = ref(false)
let achievementTitle = ['获奖/投稿时间', '奖励级别/投稿对象', '竞赛名称/科研课题', '所获奖项/论文水平', '奖励/论文说明']
let data = reactive({
  time: '',
  level: '',
  name: '',
  result: '',
  comment: ''
})
let results = ref([] as any[])

onMounted(async () => {
  try {
    const res = await GetApplication()
    res.forEach((val) => {
      if (val.content && val.auditId === 2) {
        results.value.push(JSON.parse(val.content))
      }
    })
  } catch (err: any) {
    message(err.message, 'error')
  }
})
function clear() {
  data.result = ''
  data.level = ''
  data.name = ''
  data.time = ''
  data.comment = ''
}
async function addAudit() {
  if (data.time === '' || data.level === '' || data.name === '' || data.result === '') {
    message('请填写完整内容!')
    return
  }
  messageConfirm('确认提交申请吗?').then(
    () => {
      AddAudit(2, data).then(
        () => {
          changeInfo.value = false
          message('申请成功', 'success')
        }
      ).catch(err => message(err.message, 'error'))
    }
  ).catch(() => { return })
}
</script>

<style scoped>
.btn {
  margin-left: 10px;
}
</style>
